<template>
  <div>
    <MainHeader class="layout-right-bar-header"/>
    <nuxt class="layout-right-bar-content"/>
    <MainRight class="layout-right-bar-right"/>
  </div>
</template>
<script>
  import MainHeader from '~/components/layout/main-header.vue'
  import MainRight from '~/components/layout/main-right.vue'
  export default {
    data () {
      return {}
    },
    components: {
      MainHeader,
      MainRight
    },
    methods: {}
  }
</script>
<style>
  .layout-right-bar-header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
  }

  .layout-right-bar-content, .layout-right-bar-right {
    top: 60px;
    z-index: 1;
  }

  .layout-right-bar-content {
    position: absolute;
    background-color: #9b4dca;
  }

  .layout-right-bar-right {
    position: fixed;
  }

  @media all and (min-width: 0px) and (max-width: 1400px) {
    .layout-right-bar-content {
      width: 74%;
      left: 1%;
    }
    .layout-right-bar-right {
      width: 24%;
      left: 75%;
    }
  }

  @media all and (min-width: 1400px) {
    .layout-right-bar-content {
      width: 54%;
      left: 15%;
    }
    .layout-right-bar-right {
      width: 16%;
      left: 69%;
    }
  }

</style>
